<template name="product-scrollbar">
    <!--view class="container">
        <view class="item">
            <product-item></product-item>
        </view>
        <view class="item">
            <product-item></product-item>
        </view>
        <view class="item">
            <product-item></product-item>
        </view>
        <view class="item">
            <product-item></product-item>
        </view>
    </view-->
    <u-row customStyle="flex-wrap: wrap;overflow: hidden;padding: 0 20rpx;margin: 0;" :gutter="20">
        <u-col v-for="item in product" :key="item.id" :span="6">
            <product-item :info="item"></product-item>
        </u-col>
        <!--u-col :span="6">
            <product-item></product-item>
        </u-col>
        <u-col :span="6">
            <product-item></product-item>
        </u-col>
        <u-col :span="6">
            <product-item></product-item>
        </u-col--->
    </u-row>
</template>

<script>
import ProductItem from "@/components/ProductItem"
export default {
    name: "product-scrollbar",
    components: {
        ProductItem
    },
    props: {
        product: {
            type: Array,
            default: []
        }
    }
}
</script>
<style lang="scss" scoped>
    .container {
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        overflow: hidden;
        .item {
            flex: 1;
            width: 50%;
            //height: 526rpx;
        }
    }
</style>